<template>
	<view>
		<view class="header">
			<view class="home-content">
				<view class="home-title">
					<uni-icons
						type="left"
						color="#fff"
						size="20"
						@click="back_reload"></uni-icons>
					<view class="btn">{{ "发布动态" }}</view>
				</view>
			</view>
		</view>
		<view class="dynamic">
			<uni-forms
				ref="baseForm"
				:rules="rules"
				:modelValue="baseFormData"
				:label-width="80">
				<uni-forms-item label="标题" required name="dynamicTitle">
					<uni-easyinput
						v-model="baseFormData.dynamicTitle"
						placeholder="请输入动态标题" />
				</uni-forms-item>
				<uni-forms-item label="动态内容" required name="dynamicContent">
					<uni-easyinput
						type="textarea"
						v-model="baseFormData.dynamicContent"
						placeholder="请输入动态内容" />
				</uni-forms-item>
			</uni-forms>
			<view class="file">
				<uni-file-picker
					limit="3"
					title="至少上传一张图片"
					@select="filePicker"></uni-file-picker>
			</view>
			<view style="margin-top: 30px;">
				<button type="primary" @click="submit('baseForm')">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
import api from "../../api/api";
import img from "../assets/fail.png";
export default {
	onReady() {
		
	},
	onLoad(options) {
		if(options.id){
			this.baseFormData.id = options.id
		}
		if(options.demandTitle){
			this.baseFormData.dynamicTitle = options.demandTitle
		}
		// if(options.demandContent){
		// 	this.baseFormData.dynamicContent = options.demandContent
		// }
	},
	data() {
		return {
			value: null,
			dynamicStatus: true,
			rules: {
				dynamicTitle: {
					rules: [
						{
							required: true,
							errorMessage: "标题不能为空",
						},
					],
				},
				dynamicContent: {
					rules: [
						{
							required: true,
							errorMessage: "内容不能为空",
						},
					],
				},
			},
			baseForm: {
				deptIds: [],
			},
			baseFormData: {
				id: '',
				dynamicContent: '',
				demandStatus: '2',
				dynamicTitle: '',
				hyDynamicImgList: [],
			},
			arrList: [],
			selectBar: [],
		};
	},
	methods: {
		sub(ref) {
			this.$refs[ref]
				.validate()
				.then(() => {
					api.addHyDemand(this.baseForm).then((e) => {
						if (e.data.code == 200) {
							uni.showToast({
								title: "提交成功!",
							});
							this.baseForm = {
								deptIds: [],
							};
							this.selectBar = [];
							this.value = null;
							this.back_reload();
						}
					});
				})
				.catch((err) => {
					console.log("err", err);
				});
		},
		filePicker(val) {
			var data = {
				files: val.tempFilePaths[0],
			};
			api.upload(data).then((e) => {
				if (e.code == 200) {
					var child = {
						dynamicImg: e.result[0],
					};
					this.baseFormData.hyDynamicImgList.push(child);
				}
			});
		},
		change(val) {
			let data = this.arrList.find((item) => item.value == val);
			this.selectBar.push(data.text);
			this.baseForm.deptIds.push(val);
		},
		back_reload() {
			let pages = getCurrentPages();
			uni.navigateBack({
				delta: 2,
				success() {
					pages[pages.length - 2].$vm.reloadList();
				},
			});
		},
		progress(val) {
			console.log(val);
		},


		submit(ref) {
			this.$refs[ref]
				.validate()
				.then(() => {
					if (
						this.baseFormData.hyDynamicImgList.length == 0 ||
						this.baseFormData.hyDynamicImgList == []
					) {
						uni.showToast({
							title: "请上传至少一张动态图片!",
							image: img,
						});
					} else {
						api.editHydynamic(this.baseFormData).then((e) => {
							if (e.data.code == 200) {
								console.log(e);
								uni.showToast({
									title: "提交成功!",
								});
								this.back_reload();
								setTimeout(() => {
									window.location.reload();
								}, 500);
							}
						});
					}
				})
				.catch((err) => {
					console.log("err", err);
				});
		},
	},
};
</script>

<style lang="scss" scoped>
.header {
	height: 50px;
	width: 100vw;
	.home-content {
		height: 50px;
		width: 100vw;
		position: fixed;
		top: 0;
		color: #fff;
		font-weight: 700;
		.home-title {
			position: relative;
			width: 100%;
			height: 50px;
			line-height: 50px;
			background-color: #2163e0;
			padding-left: 10px;
			.btn {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}
	}
}
.choose {
	width: 100vw;
	height: 60px;
	display: flex;
	justify-content: space-between;
	view {
		width: 49%;
		height: 60px;
		line-height: 60px;
		font-weight: 700;
		font-size: 18px;
		text-align: center;
	}
}
.dynamic {
	width: 80vw;
	margin: 10px auto;
	::v-deep .file-picker__box-content {
		background-color: #fff;
	}
	.btn {
		width: 50vw;
		margin: 10px auto;
	}
	.selectBar {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.select-item {
			margin-top: 10px;
			flex: 1 0 calc(33%);
			width: 80px;
			padding: 5px;
			background-color: #ccc;
			font-size: 12px;
			color: #fff;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
		}
	}
}
</style>
